<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="A js demo toolkit in web development">
	<meta name="keywords" content="web, js demo, jQuery plugin, jQuery widget, html, mobile">
	<meta name="author" content="Steper Kuo">
	<title>YX-JS-ToolKit</title>

	<!-- Favicons -->
	<link rel="apple-touch-icon" sizes="57x57" href="./assets/img/apple-icon-57x57.png">
	<link rel="apple-touch-icon" sizes="60x60" href="./assets/img/apple-icon-60x60.png">
	<link rel="apple-touch-icon" sizes="72x72" href="./assets/img/apple-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="76x76" href="./assets/img/apple-icon-76x76.png">
	<link rel="apple-touch-icon" sizes="114x114" href="./assets/img/apple-icon-114x114.png">
	<link rel="apple-touch-icon" sizes="120x120" href="./assets/img/apple-icon-120x120.png">
	<link rel="apple-touch-icon" sizes="144x144" href="./assets/img/apple-icon-144x144.png">
	<link rel="apple-touch-icon" sizes="152x152" href="./assets/img/apple-icon-152x152.png">
	<link rel="apple-touch-icon" sizes="180x180" href="./assets/img/apple-icon-180x180.png">
	<link rel="icon" type="image/png" sizes="192x192"  href="./assets/img/android-icon-192x192.png">
	<link rel="icon" type="image/png" sizes="32x32" href="./assets/img/favicon-32x32.png">
	<link rel="icon" type="image/png" sizes="96x96" href="./assets/img/favicon-96x96.png">
	<link rel="icon" type="image/png" sizes="16x16" href="./assets/img/favicon-16x16.png">
	<link rel="manifest" href="./manifest.json">
	<meta name="msapplication-TileColor" content="#ffffff">
	<meta name="msapplication-TileImage" content="./assets/img/ms-icon-144x144.png">
	<meta name="theme-color" content="#ffffff">

	<!--Jquery.js, HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js?rev=@@hash"></script>
	<!--[if lt IE 9]>
	<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js?rev=@@hash"></script>
	<script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js?rev=@@hash"></script>
	<![endif]-->

</head>
<body>
<!-- Script Preload code *** JS -->
<script src="https://gyx8899.github.io/YX-WebThemeKit/fn-pre-loader/preLoader.js?type=split-ssc"></script>

<!-- Script Fundebug code *** JS -->
<script src="https://js.fundebug.cn/fundebug.0.3.6.min.js" apikey="f3b60739271056d85641a316cd13350f5960922b510427e3ec514bc3f0a74ac5"></script>

<main>
	<section id="demos">
		<div class="row">
			<div id="tools" class="large-12 columns">
				<h4>Tools: </h4>
				<hr>
				<div class="demo-list">
					<div class="row">
						<div class="small-6 medium-4 large-3 columns">
							<a href="HTMLConvert/index.html" class="demo-block">
								<h5 class="classify">Convert:</h5>
								<h5>string / html / word</h5>
							</a>
						</div>
					</div>
				</div>
			</div>
			<div id="pluginEnhance" class="large-12 columns">
				<h4>Plugin: Enhancements</h4>
				<hr>
				<div class="demo-list">
					<div class="row">
						<div class="small-6 medium-4 large-3 columns">
							<a href="iScrollRefresh/index.html" class="demo-block">
								<h5 class="classify">iScroll</h5>
								<h5>Pull to Refresh</h5>
							</a>
						</div>
						<div class="small-6 medium-4 large-3 columns">
							<a href="owlCarousel2/index.html" class="demo-block">
								<h5 class="classify">owlCarousel2</h5>
								<h5>Custom fixed demos</h5>
							</a>
						</div>
					</div>
				</div>
			</div>
			<div id="pluginCreate" class="large-12 columns">
				<h4>Plugin: Creation in jQuery, JS</h4>
				<hr>
				<div class="demo-list">
					<div class="row">
						<div class="small-6 medium-4 large-3 columns">
							<a href="popupDismiss/index.html" class="demo-block">
								<h5>Popup Dismiss</h5>
							</a>
						</div>
						<div class="small-6 medium-4 large-3 columns">
							<a href="preloadImage/index.html" class="demo-block">
								<h5>Preload image</h5>
							</a>
						</div>
					</div>
				</div>
			</div>
			<div id="performance" class="large-12 columns">
				<h4>Performance optimization:</h4>
				<hr>
				<div class="demo-list">
					<div class="row">
						<div class="small-6 medium-4 large-3 columns">
							<a href="lazyLoad/index.html" class="demo-block">
								<h5 class="classify">Files, widgets:</h5>
								<h5>Lazy Load</h5>
							</a>
						</div>
						<div class="small-6 medium-4 large-3 columns">
							<a href="stickyHeader/index.html" class="demo-block">
								<h5 class="classify">Header</h5>
								<h5>Sticky header</h5>
							</a>
						</div>
					</div>
				</div>
			</div>
			<div id="research" class="large-12 columns">
				<h4>Research:</h4>
				<hr>
				<div class="demo-list">
					<div class="row">
						<div class="small-6 medium-4 large-3 columns">
							<a href="resizeEvent/index.html" class="demo-block">
								<h5 class="classify">Resize event</h5>
								<h5>Mobile browser header</h5>
							</a>
						</div>
						<div class="small-6 medium-4 large-3 columns">
							<a href="setTimeoutAndInterval/index.html" class="demo-block">
								<h5 class="classify">Timeout VS Interval</h5>
								<h5>Differences demo</h5>
							</a>
						</div>
						<div class="small-6 medium-4 large-3 columns">
							<a href="priorityScriptStyle/index.html" class="demo-block">
								<h5 class="classify">Priority js/css file</h5>
								<h5>Dynamic import</h5>
							</a>
						</div>
					</div>
				</div>
			</div>
			<div id="jsTips" class="large-12 columns">
				<h4>JS Tips:</h4>
				<hr>
				<div class="demo-list">
					<div class="row">
						<div class="small-6 medium-4 large-3 columns">
							<a href="JS-Tricks/tricks.md" class="demo-block">
								<h5 class="classify">Javascript tricks</h5>
								<h5>Tricks markdown</h5>
							</a>
						</div>
					</div>
				</div>
			</div>
			<div id="artPrograming" class="large-12 columns">
				<h4>JS: The Art Of Programing</h4>
				<hr>
				<div class="demo-list">
					<div class="row">
						<div class="small-6 medium-4 large-3 columns">
							<a href="the-art-of-programing/index.html" class="demo-block">
								<h5 class="classify">Demos in JS</h5>
								<h5>Read and Test</h5>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
</main>

<!-- Script Common *** JS -->
<script src="https://gyx8899.github.io/YX-JS-ToolKit/dist/assets/js/common.min.js"></script>

<!-- Script Config *** JS -->
<script src="https://gyx8899.github.io/YX-WebThemeKit/assets/js/yx-theme-config.min.js"></script>

</body>
</html>